<template>
	<view class="container" :style="{'--bg': common.appStyle.home_nav_color}">
		<view class="seeding-list">
			<view class="item" v-for="item in seedingData" :key="item.id" @tap="to_details(item)">
				<view class="img-bg image" :style="{ background: `url(${$wanlshop.oss(item.images[0])})` }"></view>

				<!-- <div class="bottom">
					<view class="title">
						{{ item.content }}
					</view>

					<view class="msg">
						<view class="img-bg avatar" :style="{ background: `url(${$wanlshop.oss(item.user.avatar)})` }"></view>
						<view class="name">{{ item.user.nickname ? item.user.nickname : item.user.username }}</view>
					</view>
				</div> -->
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from 'vuex';	
export default {
	data() {
		return {
			seedingData: [], // 种草秀列表
			product_id: null, // 对应的商品id
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(e) {
		this.loadList(e.id);
		this.product_id = e.id;
	},
	methods: {
		// 获取种草秀列表
		loadList(id) {
			this.$api.get({
				url: '/wanlshop/product/goodShow?id=' + id,
				success: res => {
					console.log('res', res)
					this.seedingData = res.comment.data;
				}
			})
		},
		// 进入种草秀详情
		to_details(item) {
			uni.navigateTo({
				url: '/pages/seeding/details?id=' + item.id,
				success: (res) => {
					res.eventChannel.emit('sentSeedingData', {
						data: item
					});
				}
			})
		}
	}
}
</script>

<style>
page {
	height: 100%;
}	
</style>
<style lang="scss" scoped>
.container {
	min-height: 100%;
	width: 100%;
	padding: 20rpx 20rpx;
	box-sizing: border-box;
	background-color: var(--bg);
	.seeding-list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 10px;

		.item {
			background-color: white;
			border-radius: 18rpx 18rpx 8rpx 8rpx;
			overflow: hidden;

			.img-bg {
				background-size: cover !important;
				background-repeat: no-repeat !important;
				background-position: center !important;
			}

			.image {
				width: 100%;
				height: 400rpx;
			}

			.bottom {
				width: 100%;
				padding: 30rpx 16rpx;
				box-sizing: border-box;

				.title {
					font-size: 30rpx;
					color: #3d3d3d;
					width: 100%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
					margin-bottom: 20rpx;
				}

				.msg {
					display: flex;
					align-items: center;
					gap: 12rpx;
					width: 100%;

					.avatar {
						width: 40rpx;
						height: 40rpx;
						border-radius: 50%;
						flex-shrink: 0;
					}

					.name {
						width: 100%;
						font-size: 28rpx;
						// 文笔溢出
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
						color: #3d3d3d;
					}
				}
			}
		}

	}
}
</style>